www.gusucode.com > 带动画效果的Ajax html5表单源码程序 > 带动画效果的Ajax html5表单/jqcss3noderegjQuery+CSS3节点接触形式带有UI设计体感的注册表单/jqcss3noderegjQuery+CSS3节点接触形式带有UI设计体感的注册表单/src/stylesheets/themes.css

    /* ------ Theme: Aqua ------ */
.njsform.theme-aqua .njsform-header {
  background: #19bec8;
  color: #FFF;
}
.njsform.theme-aqua .njsform-socialbar {
  background: #15a0a8;
  border-color: #13939b;
}
.njsform.theme-aqua #humanQuestionLabel {
  color: #19bec8;
}
.njsform.theme-aqua .errorMessage,
.njsform.theme-aqua .message.error {
  color: #2fdbe5;
}
.njsform.bg-white.theme-aqua .errorMessage,
.njsform.bg-white.theme-aqua .message.error {
  color: #13939b;
}
.njsform.theme-aqua input[type="text"]:focus,
.njsform.theme-aqua input[type="email"]:focus,
.njsform.theme-aqua input[type="url"]:focus,
.njsform.theme-aqua input[type="tel"]:focus,
.njsform.theme-aqua textarea:focus,
.njsform.theme-aqua select:focus {
  border-color: #19bec8;
  -webkit-box-shadow: 0 0 5px #19bec8;
  -moz-box-shadow: 0 0 5px #19bec8;
  box-shadow: 0 0 5px #19bec8;
}
.njsform.theme-aqua input[type="submit"] {
  background-color: #16a8b1;
  border-color: #128a92;
}
.njsform.theme-aqua .submitWrap input[type="submit"]:hover {
  background-color: #13939b;
  border-color: #107d84;
}
.njsform.theme-aqua .submitWrap input[type="submit"]:active {
  background-color: #107d84;
  border-color: #0f7076;
  outline: none;
}

/* ------ Theme: Blue ------ */
.njsform.theme-blue .njsform-header {
  background: #009ac4;
  color: #FFF;
}
.njsform.theme-blue .njsform-socialbar {
  background: #007ea0;
  border-color: #007291;
}
.njsform.theme-blue #humanQuestionLabel {
  color: #009ac4;
}
.njsform.theme-blue .errorMessage,
.njsform.theme-blue .message.error {
  color: #00c2f7;
}
.njsform.bg-white.theme-blue .errorMessage,
.njsform.bg-white.theme-blue .message.error {
  color: #007291;
}
.njsform.theme-blue input[type="text"]:focus,
.njsform.theme-blue input[type="email"]:focus,
.njsform.theme-blue input[type="url"]:focus,
.njsform.theme-blue input[type="tel"]:focus,
.njsform.theme-blue textarea:focus,
.njsform.theme-blue select:focus {
  border-color: #009ac4;
  -webkit-box-shadow: 0 0 5px #009ac4;
  -moz-box-shadow: 0 0 5px #009ac4;
  box-shadow: 0 0 5px #009ac4;
}
.njsform.theme-blue input[type="submit"] {
  background-color: #0086ab;
  border-color: #006a87;
}
.njsform.theme-blue .submitWrap input[type="submit"]:hover {
  background-color: #007291;
  border-color: #005e78;
}
.njsform.theme-blue .submitWrap input[type="submit"]:active {
  background-color: #005e78;
  border-color: #005268;
  outline: none;
}

/* ------ Theme: green ------ */
.njsform.theme-green .njsform-header {
  background: #2dcb74;
  color: #FFF;
}
.njsform.theme-green .njsform-socialbar {
  background: #27ae63;
  border-color: #24a15c;
}
.njsform.theme-green #humanQuestionLabel {
  color: #2dcb74;
}
.njsform.theme-green .errorMessage,
.njsform.theme-green .message.error {
  color: #52d98f;
}
.njsform.bg-white.theme-green .errorMessage,
.njsform.bg-white.theme-green .message.error {
  color: #24a15c;
}
.njsform.theme-green input[type="text"]:focus,
.njsform.theme-green input[type="email"]:focus,
.njsform.theme-green input[type="url"]:focus,
.njsform.theme-green input[type="tel"]:focus,
.njsform.theme-green textarea:focus,
.njsform.theme-green select:focus {
  border-color: #2dcb74;
  -webkit-box-shadow: 0 0 5px #2dcb74;
  -moz-box-shadow: 0 0 5px #2dcb74;
  box-shadow: 0 0 5px #2dcb74;
}
.njsform.theme-green input[type="submit"] {
  background-color: #28b668;
  border-color: #229957;
}
.njsform.theme-green .submitWrap input[type="submit"]:hover {
  background-color: #24a15c;
  border-color: #1f8c50;
}
.njsform.theme-green .submitWrap input[type="submit"]:active {
  background-color: #1f8c50;
  border-color: #1c8049;
  outline: none;
}

/* ------ Theme: Pink ------ */
.njsform.theme-pink .njsform-header {
  background: #b15299;
  color: #FFF;
}
.njsform.theme-pink .njsform-socialbar {
  background: #9a4585;
  border-color: #8f417b;
}
.njsform.theme-pink #humanQuestionLabel {
  color: #b15299;
}
.njsform.theme-pink .errorMessage,
.njsform.theme-pink .message.error {
  color: #c175ae;
}
.njsform.bg-white.theme-pink .errorMessage,
.njsform.bg-white.theme-pink .message.error {
  color: #8f417b;
}
.njsform.theme-pink input[type="text"]:focus,
.njsform.theme-pink input[type="email"]:focus,
.njsform.theme-pink input[type="url"]:focus,
.njsform.theme-pink input[type="tel"]:focus,
.njsform.theme-pink textarea:focus,
.njsform.theme-pink select:focus {
  border-color: #b15299;
  -webkit-box-shadow: 0 0 5px #b15299;
  -moz-box-shadow: 0 0 5px #b15299;
  box-shadow: 0 0 5px #b15299;
}
.njsform.theme-pink input[type="submit"] {
  background-color: #a1498b;
  border-color: #883d75;
}
.njsform.theme-pink .submitWrap input[type="submit"]:hover {
  background-color: #8f417b;
  border-color: #7e396c;
}
.njsform.theme-pink .submitWrap input[type="submit"]:active {
  background-color: #7e396c;
  border-color: #733463;
  outline: none;
}

/* ------ Theme: Purple ------ */
.njsform.theme-purple .njsform-header {
  background: #cb2dab;
  color: #FFF;
}
.njsform.theme-purple .njsform-socialbar {
  background: #ae2792;
  border-color: #a12488;
}
.njsform.theme-purple #humanQuestionLabel {
  color: #cb2dab;
}
.njsform.theme-purple .errorMessage,
.njsform.theme-purple .message.error {
  color: #d952bd;
}
.njsform.bg-white.theme-purple .errorMessage,
.njsform.bg-white.theme-purple .message.error {
  color: #a12488;
}
.njsform.theme-purple input[type="text"]:focus,
.njsform.theme-purple input[type="email"]:focus,
.njsform.theme-purple input[type="url"]:focus,
.njsform.theme-purple input[type="tel"]:focus,
.njsform.theme-purple textarea:focus,
.njsform.theme-purple select:focus {
  border-color: #cb2dab;
  -webkit-box-shadow: 0 0 5px #cb2dab;
  -moz-box-shadow: 0 0 5px #cb2dab;
  box-shadow: 0 0 5px #cb2dab;
}
.njsform.theme-purple input[type="submit"] {
  background-color: #b62899;
  border-color: #992281;
}
.njsform.theme-purple .submitWrap input[type="submit"]:hover {
  background-color: #a12488;
  border-color: #8c1f76;
}
.njsform.theme-purple .submitWrap input[type="submit"]:active {
  background-color: #8c1f76;
  border-color: #801c6c;
  outline: none;
}

/* ------ Theme: red ------ */
.njsform.theme-red .njsform-header {
  background: #f18176;
  color: #FFF;
}
.njsform.theme-red .njsform-socialbar {
  background: #ee6356;
  border-color: #ec5648;
}
.njsform.theme-red #humanQuestionLabel {
  color: #f18176;
}
.njsform.theme-red .errorMessage,
.njsform.theme-red .message.error {
  color: #f6aca4;
}
.njsform.bg-white.theme-red .errorMessage,
.njsform.bg-white.theme-red .message.error {
  color: #ec5648;
}
.njsform.theme-red input[type="text"]:focus,
.njsform.theme-red input[type="email"]:focus,
.njsform.theme-red input[type="url"]:focus,
.njsform.theme-red input[type="tel"]:focus,
.njsform.theme-red textarea:focus,
.njsform.theme-red select:focus {
  border-color: #f18176;
  -webkit-box-shadow: 0 0 5px #f18176;
  -moz-box-shadow: 0 0 5px #f18176;
  box-shadow: 0 0 5px #f18176;
}
.njsform.theme-red input[type="submit"] {
  background-color: #ef6c5f;
  border-color: #eb4e3e;
}
.njsform.theme-red .submitWrap input[type="submit"]:hover {
  background-color: #ec5648;
  border-color: #ea4131;
}
.njsform.theme-red .submitWrap input[type="submit"]:active {
  background-color: #ea4131;
  border-color: #e83423;
  outline: none;
}

/* ------ Theme: yellow ------ */
.njsform.theme-yellow .njsform-header {
  background: #ffb518;
  color: #FFF;
}
.njsform.theme-yellow .njsform-socialbar {
  background: #f3a500;
  border-color: #e49b00;
}
.njsform.theme-yellow #humanQuestionLabel {
  color: #ffb518;
}
.njsform.theme-yellow .errorMessage,
.njsform.theme-yellow .message.error {
  color: #ffc54b;
}
.njsform.bg-white.theme-yellow .errorMessage,
.njsform.bg-white.theme-yellow .message.error {
  color: #e49b00;
}
.njsform.theme-yellow input[type="text"]:focus,
.njsform.theme-yellow input[type="email"]:focus,
.njsform.theme-yellow input[type="url"]:focus,
.njsform.theme-yellow input[type="tel"]:focus,
.njsform.theme-yellow textarea:focus,
.njsform.theme-yellow select:focus {
  border-color: #ffb518;
  -webkit-box-shadow: 0 0 5px #ffb518;
  -moz-box-shadow: 0 0 5px #ffb518;
  box-shadow: 0 0 5px #ffb518;
}
.njsform.theme-yellow input[type="submit"] {
  background-color: #feac00;
  border-color: #da9400;
}
.njsform.theme-yellow .submitWrap input[type="submit"]:hover {
  background-color: #e49b00;
  border-color: #cb8a00;
}
.njsform.theme-yellow .submitWrap input[type="submit"]:active {
  background-color: #cb8a00;
  border-color: #bb7f00;
  outline: none;
}